<script setup lang="ts">
import {ref, watchEffect} from "vue";
const tabs = [{ text: '数据库' }, { 'text': '三元组' }];
const activeIndex = ref(0);
const emit = defineEmits(['on-exec', 'on-change']);
const props = defineProps({
  activeIndex: {
    type: Number,
    default: 0
  }
});
watchEffect(() => {
  if (props.activeIndex) {
    activeIndex.value = props.activeIndex;
  }
});

const handleTabClicked = (index: number) => {
  activeIndex.value = index;
  emit('on-change', index);
}

const handleExecClicked = () => {
  emit('on-exec', activeIndex.value);
}

</script>

<template>
  <div class="tabs">
    <div style="color: #B4C0CC; font-size: 20px">查看数据：</div>
    <div class="btn-group">
      <div v-for="(item, index) in tabs" :key="index" @click="handleTabClicked(index);">
        <button :class="{ active: activeIndex === index }">{{ item.text }}</button>
      </div>
    </div>
    <div class="btn-run" @click="handleExecClicked">
      执行<img src="../assets/right-arrow.svg" style="margin-left: 8px"  alt="right arrow"/>
    </div>
  </div>
</template>

<style scoped>
.tabs {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.btn-group {
  display: flex;
  align-items: center;
  height: 100%;
}

.btn-group div {
  width: 100px;
  height: 52px;
  font-size: 16px;
  background-image: url(../assets/button-bg.png);
  padding: 5px;
  margin-right: 10px;
}

.btn-group div button {
  height: 42px;
  width: 90px;
  font-size: 16px;
  color: #1FC6FF;
  background-color: #0D242F;
  border: 1px solid #1FC6FF;
  cursor: pointer;
}

.btn-group div button.active {
  background-color: rgba(31, 198, 255, 0.3);
  color: #fff;
  font-weight: bold;
}

.btn-group div button:hover {
  background-color: rgba(31, 198, 255, 0.3);
  color: #fff;
  font-weight: bold;
}

.btn-run {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
  background-image: url(../assets/run-bg.png);
  margin-left: 10px;
  cursor: pointer;
}
</style>